package com.eliza.music.view.music.mine

import android.content.res.Configuration
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Menu
import androidx.compose.material.icons.rounded.Star
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.paint
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import coil.compose.rememberAsyncImagePainter
import com.eliza.library.ui.inter.AIBaseRoute
import com.eliza.library.utils.compose.ImageBuild
import com.eliza.music.model.entity.BasicInfo
import com.eliza.music.model.entity.UserInfo
import com.eliza.music.model.tmp.AIBaseRoutes
import com.eliza.music.model.tmp.ResAvatar
import com.eliza.music.model.tmp.UserInfox
import com.eliza.music.ui.pager.bounceClick
import com.eliza.music.ui.theme.FontSize
import com.eliza.music.ui.theme.PaddingSize
import kotlinx.coroutines.launch


data class Btn(
    val title: String, val imageVector: ImageVector
)


data class BasicTitle(
    val id: Int, val title: String
)

@Composable
fun ShowBtn(data: List<Btn>, modifier: Modifier = Modifier) {
    val color = Color.LightGray.copy(0.3f)
    Row(
        modifier = modifier.padding(0.dp, PaddingSize.Normal.size),
        horizontalArrangement = Arrangement.spacedBy(PaddingSize.Normal.size),
        verticalAlignment = Alignment.CenterVertically
    ) {
        data.forEachIndexed { _, it ->
            TextButton(
                onClick = { },
                modifier = Modifier.run {
                    background(color, shape = RoundedCornerShape(PaddingSize.Normal.size))
                        .height(PaddingSize.Normal.size * 2)
                }
            ) {
                Icon(
                    imageVector = it.imageVector,
                    contentDescription = "",
                    tint = Color.White,
                    modifier = Modifier
                        .fillMaxHeight()
                        .padding(2.dp)
                )
                Text(
                    modifier = Modifier
                        .fillMaxHeight(),
                    text = it.title, color = Color.White, fontSize = FontSize.Small.size
                )
            }

        }

    }

}


@Composable
fun ShowBtnX(modifier: Modifier = Modifier) {
    val btns = listOf(
        Btn("最近", Icons.Rounded.Menu),
        Btn("本地", Icons.Rounded.Menu),
        Btn("云盘", Icons.Rounded.Menu),
        Btn("听书", Icons.Rounded.Menu),
        Btn("", Icons.Rounded.Star),
    )
    ShowBtn(data = btns)
}

@Preview(
    showSystemUi = false,
    showBackground = false,
    uiMode = Configuration.UI_MODE_TYPE_TELEVISION
)
@Composable
private fun Preview() {
//    PlayingX.PlayingItem(Playlist("Eveas(埃斯库)", "Talowas", ""))
    MinePageX.Screen()
}


object MinePageX {
    @Composable
    fun Route() {
        Screen()
    }

    @Composable
    fun Screen() {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .background(Color.LightGray)
        ) {
            UserPage(data = UserInfox, modifier = Modifier.weight(5f))
            TabRoot(AIBaseRoutes, modifier = Modifier.weight(5f))
        }
    }

    @Composable
    fun UserPage(data: UserInfo, modifier: Modifier = Modifier) {
        val titleColor = Color.White
        val descriptorColor = Color.White.copy(0.8f)
        val fontFamily = FontFamily.SansSerif
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .fillMaxWidth()
                .paint(
                    rememberAsyncImagePainter(
                        model = ImageBuild.CoilImageRequest(
                            LocalContext.current, ResAvatar.random()
                        )
                    ),
                    contentScale = ContentScale.Crop,
                    alpha = 0.8f
                )
                .then(modifier)
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.spacedBy(10.dp, Alignment.CenterVertically),
                modifier = Modifier
                    .align(Alignment.BottomCenter)
                    .padding(0.dp, 20.dp)
            ) {
                AsyncImage(
                    model = ImageBuild.CoilImageRequest(
                        LocalContext.current,
                        ResAvatar.random()
                    ),
                    contentDescription = "",
                    alignment = Alignment.TopCenter,
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .fillMaxSize(0.3f)
                        .aspectRatio(1f)
                        .shadow(10.dp, shape = CircleShape, spotColor = Color.Gray)
                )
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
                        text = data.name,
                        fontWeight = FontWeight.W900,
                        fontSize = 25.sp,
                        color = titleColor,
                    )
                    Icon(
                        imageVector = Icons.Rounded.Star,
                        contentDescription = "",
                        tint = Color.White
                    )
                }

                Text(
                    text = data.descriptor, color = descriptorColor, fontFamily = fontFamily,
                )
                Row(
                    horizontalArrangement = Arrangement.spacedBy(PaddingSize.Normal.size)
                ) {
                    data.tags.forEach {
                        Text(
                            it,
                            color = descriptorColor,
                            fontFamily = fontFamily,
                            fontWeight = FontWeight.W500
                        )
                    }
                }
                ShowBtnX()
            }

        }
    }


    @Composable
    fun <T : BasicInfo> PlaylistItem(it: T, modifier: Modifier = Modifier) {
        Row(
            modifier = Modifier
                .fillMaxHeight()
                .background(Color.Transparent)
                .padding(0.dp, PaddingSize.Small.size)
                .border(1.dp, Color.LightGray.copy(0.1f))
                .bounceClick(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Image(
                painter = rememberAsyncImagePainter(
                    model = ImageBuild.CoilImageRequest(
                        LocalContext.current,
                        it.icon
                    )
                ),
                contentDescription = "",
                modifier = Modifier
                    .weight(3f)
                    .fillMaxHeight()
                    .clip(RoundedCornerShape(8.dp)),
                contentScale = ContentScale.FillWidth
            )
            Column(
                modifier = Modifier
                    .weight(7f)
                    .fillMaxHeight()
                    .padding(PaddingSize.Normal.size, 0.dp, 0.dp, 0.dp),
                verticalArrangement = Arrangement.SpaceEvenly,
            ) {
                Text(
                    text = it.title,
                    fontSize = FontSize.Normal.size,
                    fontWeight = FontWeight.W500,
                )
                Text(
                    text = it.description,
                    fontSize = FontSize.Small.size,
                    color = MaterialTheme.colorScheme.secondary, maxLines = 1,
                )
            }
        }
    }

    @Composable
    fun TabRoot(pplist: List<AIBaseRoute>, modifier: Modifier = Modifier) {
        val pagerState = rememberPagerState(pageCount = { pplist.size })
        val coroutineScope = rememberCoroutineScope()
        Column(
            modifier = Modifier.then(modifier),
        ) {
            TabRow(
                modifier = Modifier.clip(RoundedCornerShape(10.dp, 10.dp)),
                selectedTabIndex = pagerState.currentPage,
            ) {
                pplist.forEachIndexed { index, page ->
                    val selected = pagerState.currentPage == index
                    Tab(
                        modifier = Modifier.height(40.dp),
                        selected = selected,
                        onClick = {
                            coroutineScope.launch {
                                pagerState.animateScrollToPage(index)
                            }
                        },
                        text = {
                            Text(
                                text = page.title,
                                textDecoration = if (selected) TextDecoration.Underline else TextDecoration.None
                            )
                        },
                        unselectedContentColor = MaterialTheme.colorScheme.secondary,
                    )
                }
            }
            // Pages
            HorizontalPager(
                modifier = Modifier
                    .fillMaxHeight()
                    .background(MaterialTheme.colorScheme.background)
                    .testTag("horizontalPagerTag"),
                state = pagerState,
                verticalAlignment = Alignment.Top,
            ) { index ->
                pplist[index].content()
            }
        }
    }
}



